<template>
  <div class="nav">
    <div class="container nav-content">
      <div class="style">首页 > 钢管分类 > 钢管</div>
      <div class="control-detail">
        <img class="banner" :src="message.mainImage" alt="">
        <!-- <div class="banner" /> -->
      </div>
      <div class="merchandise-detail">
        <div class="title">{{ spuDetailVo.mainCategoryName }}</div>
        <div class="price">
          <div class="left">
            <div>
              价 格<span class="distance">￥</span><span class="price-size">{{ message.price }}</span>
            </div>
            <div>品 牌<span class="distance">{{ message.chineseName }}</span></div>
          </div>
          <div class="right">
            <div>
              <div>销量</div>
              <div class="size-color">{{ message.saleAmount }}</div>
            </div>
            <div class="line" />
            <div>
              <div>库存</div>
              <div class="size-color">{{ message.skuNum }}</div>
            </div>
          </div>
        </div>
        <div class="grade">
          <div class="grade-left">
            <div v-if="spuDetailVo.standardProa">{{ spuDetailVo.standardProa }}：<span>{{ spuDetailVo.proaVal }}</span></div>
            <div v-if="spuDetailVo.standardProb">{{ spuDetailVo.standardProb }}：<span>{{ spuDetailVo.probVal }}</span></div>
            <div v-if="spuDetailVo.standardProc">{{ spuDetailVo.standardProc }}：<span>{{ spuDetailVo.procVal }}</span></div>
            <div v-if="spuDetailVo.standardProd">{{ spuDetailVo.standardProd }}：<span>{{ spuDetailVo.prodVal }}</span></div>
            <div v-if="spuDetailVo.standardProe">{{ spuDetailVo.standardProe }}：<span>{{ spuDetailVo.proeVal }}</span></div>
          </div>
          <div class="grade-right" @click="openDetail">
            联系方式
            <i class="iconfont icon-relation phone" />
          </div>
        </div>
        <div class="site">
          <div class="plan">
            发货地址：<span>广东省-广州市-天河区
              <div class="line" /></span><span class="vehicle">车辆配送</span>
          </div>
          <div>仓库名称：<span>{{ message.repositoryName }}</span></div>
          <div>收货地址：<span>广东省广州市天河区涌东路20号</span></div>
          <div>运输里程：<span>30km</span></div>
          <div>每天最大出货量：<span>{{ message.maxShipment }}</span></div>
          <div>发货时间：<span>下单后{{ message.maxDeliveryTime }}天内发货</span></div>
        </div>
        <div class="close">
          <div>
            采购数量：<span
              class="counter"
              @click="openPurchase"
            ><el-input-number
              v-model="num"
              :min="1"
              :max="10"
              label="描述文字"
              :disabled="true"
              @change="handleChange"
            /></span>吨<span class="minimum">（最低{{ message.minBuyNum }}{{ message.unit }}起售）</span>
          </div>
          <div>商品总价：<span>￥1666.0</span></div>
          <div>运费总价：<span>￥1666.0</span></div>
          <div>
            总 价：<span class="money">￥</span><span class="total">1666.0</span>
          </div>
          <div>交易方式：<span>线下交易</span></div>
          <div class="botton">
            <el-button type="danger" @click="openBuy">立即购买</el-button>
            <el-button
              type="danger"
              class="vehicle"
              @click="openLogin"
            >加入购物车</el-button>
            <el-button type="danger" class="shirk" @click="passBuck">推单</el-button>
          </div>
          <div class="remind">
            退换货服务：
            <span v-if="message.isSupport ==='Y'">不支持7天无理由退货</span>
            <span v-else>支持7天无理由退货</span>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="quantityInput"
      width="538px"
      class="dialog"
      :before-close="handleClose"
    >
      <div class="purchase">
        <span>采购数量：</span>
        <el-input v-model="range" />
        <span class="unit">吨/m³</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="quantityCertain">确 定</el-button>
        <el-button @click="quantityCall">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="wayTitle"
      :visible.sync="phoneDialog.open"
      width="538px"
      :before-close="handleClose"
    >
      <div class="dialog-detail">
        <div>
          <div>
            <span>联系人:</span>
            <span>{{ phoneDialog.data.salesman }}</span>
          </div>
          <div>
            <span>联系电话:</span>
            <span>{{ phoneDialog.data.contactPhone }}</span>
          </div>
          <div v-for="(item,index) in phoneDialog.data.emergoyPhone" :key="index">
            <span :class="index !== 0?'hidden-title':''">办公电话：</span><span>{{ item }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :title="title"
      :visible.sync="detailHint"
      width="538px"
      :before-close="handleClose"
    >
      <div class="reminder">
        <div>平台当前暂时不支持线上交易，若有意向采购</div>
        <div>可电话联系商户哦！</div>
      </div>
    </el-dialog>
    <!-- <el-dialog
      :visible.sync="loginDialog"
      width="480px"
      class="dialog dialog-login"
      :before-close="handleClose"
    >
      <div class="right-content">
        <div class="type">
          <div :class="{'account' : loginType, 'account-active': !loginType}" @click="changeType(true)">账户登录</div>
          <div class="line" />
          <div :class="{'code-active' : !loginType, 'code' : loginType}" @click="changeType(false)">验证码登录</div>
        </div>
        <div v-if="loginType" class="content">
          <Account @registered="toRegisterPage" @password="toRestPassword" />
        </div>
        <div v-else class="content">
          <Verify @registered="toRegisterPage" @password="toRestPassword" />
        </div>
      </div>
    </el-dialog> -->
    <LoginDialog :login-dialog="loginDialog" />
  </div>
</template>

<script>
import LoginDialog from '@/components/LoginDialog'
// import Verify from '@/views/login/component/Verify'
import { loginCheck } from '@/api/common.js'
import { loadPhone } from '@/util/spuContantWay'
import Account from '@/views/login/component/Account'
import Verify from '@/views/login/component/Verify'


export default {
  name: 'Nav',
  components: {
    LoginDialog
    // Verify
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    message: Object,
    // eslint-disable-next-line vue/require-default-prop
    spuDetailVo: Object,
    phoneDialog: Object,
    wayTitle: String,
    freight: Object,
    // eslint-disable-next-line vue/require-default-prop
    spuDetailVo: Object
  },
  data() {
    return {
      // phoneDialog: {
      //   open: false,
      //   data: {}
      // },
      productList: [],
      num: 1,
      range: '',
      state: 0,
      detailPage: true,
      quantityInput: false,
      title: '',
      loginDialog: false,
      detailHint: false,
      registerState: ''
    }
  },
  watch: {
    num: {
      handler: function(newVal, oldVal) {
        console.log('监听值变化', newVal, oldVal)
        if (newVal !== 0) {
          this.calculateFreight()
        }
      }
    }

  },
  mounted() {
    this.loginState()
  },
  methods: {
    changeType(loginType) {
      this.loginType = loginType
    },
    // 加入购物车按钮
    openLogin() {
      if (!this.registerState) {
        this.loginDialog = true
      }
    },
    // 推单按钮
    passBuck() {
      if (!this.registerState) {
        this.loginDialog = true
      }
    },
    toRegister() {
      this.$router.push('/register')
    },
    toPassword() {
      this.$router.push('/reset-password')
    },
    openPurchase() {
      this.title = '采购数量'
      this.quantityInput = true
    },
    quantityCertain() {
      this.num = this.range
      this.$store.commit('BUY_NUM', this.num)
      this.quantityInput = false
    },
    quantityCall() {
      this.quantityInput = false
    },
    openDetail(message) {
      this.$emit('openDetail')
      // const spuId = message.spuId
      // this.title = '联系方式'
      // // 直接匿名函数搞定
      // loadPhone(spuId, (data) => {
      //   this.phoneDialog.data = data
      //   this.$emit('member', data)
      //   if (data.emergoyPhone) {
      //     this.phoneDialog.data.emergoyPhone = data.emergoyPhone.split(',')
      //   }
      //   this.phoneDialog.open = true
      // }, onlyAccount => {
      //   // console.log(showLoginDialog, '123')
      // }, showLoginDialog => {
      //   this.loginDialog = true
      // })
    },
    openBuy() {
      if (!this.registerState) {
        this.loginDialog = true
        return
      }
      this.title = '立即购买'
      this.detailHint = true
    },
    // 右上角关闭按钮
    handleClose() {
      this.quantityInput = false
      this.phoneDialog.open = false
      this.loginDialog = false
      this.detailHint = false
    },
    handleChange() {

    },
    toRegisterPage() {
      this.$router.push('/register')
    },
    toRestPassword() {
      this.$router.push('/reset-password')
    },
    calculateFreight() {
      this.$emit('calculateFreight')
    },
    loginState() {
      loginCheck().then(res => {
        this.registerState = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/style/common-color.scss";
.nav {
  line-height: 30px;
  font-size: 14px;
  .nav-content {
    .style {
      margin-top: 7px;
    }
    .control-detail {
      // width: 420px;
      // height: 420px;
      float: left;
      margin-right: 26px;
      .banner {
        margin: 7px 0 16px 0;
        width: 402px;
        height: 402px;
      }
    }
    .merchandise-detail {
      float: left;
      .title {
        color: #3d3d3d;
        font-size: 14px;
        font-weight: bold;
      }
      .price {
        padding: 14px;
        width: 540px;
        background: #f3f3f3;
        height: 87px;
        .left {
          float: left;
          color: #8e8e93;
          font-size: 14px;
          .distance {
            margin-left: 16px;
          }
          .price-size {
            font-size: 18px;
            color: #ff3b30;
          }
        }
        .right {
          color: #8e8e93;
          font-size: 12px;
          float: right;
          display: flex;
          width: 120px;
          justify-content: space-around;
          .line {
            width: 1px;
            height: 10px;
            background: #c7c7cc;
            margin-top: 10px;
            // border-right: 1px solid #C7C7CC;
          }
          .size-color {
            color: #02a9f1;
            font-size: 12px;
          }
        }
      }
      .grade {
        display: flex;
        padding: 14px 0 17px 14px;
        color: #a7a7aa;
        border-bottom: 1px solid #e5e5e5;
        justify-content: space-between;
        .grade-right {
          color: #ff3b30;
          cursor: pointer;
          .phone {
            font-size: 20px;
          }
        }
        span {
          color: #6b6b6b;
        }
      }
      .site {
        padding: 14px 0 17px 14px;
        border-bottom: 1px solid #e5e5e5;
        div {
          color: #a7a7aa;
          font-size: 14px;
        }
        span {
          color: #6b6b6b;
        }
        .plan {
          position: relative;
          .line {
            position: absolute;
            width: 1px;
            background: #6b6b6b;
            height: 12px;
            top: 9px;
            left: 216px;
          }
          .vehicle {
            margin-left: 20px;
          }
        }
      }
      .close {
        padding: 14px 0 17px 14px;
        .counter {
          margin-right: 22px;
        }
        .minimum {
          color: #fc8a41;
          font-size: 12px;
        }
        .money {
          color: #ff3b30;
        }
        .total {
          color: #ff3b30;
          font-size: 18px;
        }
        div {
          color: #a7a7aa;
        }
        span {
          color: #6b6b6b;
        }
        .botton {
          margin-top: 18px;
          .vehicle {
            background: #fff9f1;
            border: 1px solid #ff3b30;
            color: #ff3b30;
          }
          .shirk {
            background: #fff9f1;
            border: 1px solid #fc883e;
            color: #fc8a41;
          }
        }
      }
      .remind {
        color: #c7c7cc;
        font-size: 12px;
        margin-top: 12px;
      }
    }
    .recommend {
      margin-top: 7px;
      float: right;
      width: 200px;
      height: 570px;
      border: 1px solid #e2e2e2;
      border-bottom: none;
      .title {
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        color: #6b6b6b;
        background: #f3f3f3;
        border-bottom: 1px solid #e2e2e2;
        span {
          float: left;
        }
        .trade {
          float: right;
          .change {
            cursor: pointer;
          }
        }
      }
      li {
        padding-left: 47px;
        border: 1px solid #e5e5e5;
        cursor: pointer;
        .banner {
          margin-top: 18px;
          width: 102px;
          height: 93px;
          background: lightcoral;
        }
        .name {
          margin-top: 4px;
          font-size: 12px;
          color: #373737;
        }
        .money {
          text-align: left;
          color: #ff3b30;
          font-size: 15px;
        }
      }
    }
  }
  .purchase {
    display: flex;
    align-items: center;
    justify-content: center;
    .unit {
      margin-left: 15px;
    }
  }
  .right-content{
    width:359px;
    height:348px;
    // border:1px solid #E5E5E5;
    .type{
      display: flex;
      border-bottom: 1px solid #E5E5E5;
      line-height: 51px;
      justify-content: space-around;
      align-items: center;
      .account{
        color: #FF3B30;
        cursor:pointer
      }
      .account-active{
        color: #3D3D3D;
        cursor:pointer
      }
      .line{
        width:0px;
        height:16px;
        border:1px solid #E5E5E5;
      }
      .code{
        color: #3D3D3D;
        cursor:pointer
      }
      .code-active{
        color: #FF3B30;
        cursor:pointer
      }
    }
    .content{
      text-align: center;
      .iconfont{
        position: absolute;
      }
      .item{
        position: relative;
        .user{
          font-size: 24px;
          top: 26px;
          left: 35px;
        }
        .pass{
          font-size: 22px;
          top: 26px;
          left: 36px;
        }
        .key{
          font-size: 20px;
          top: 25px;
          left: 36px;
        }
        .input{
          width:317px;
          height:42px;
          border:1px solid #E5E5E5;
          margin-top: 20px;
          text-indent:44px;
        }
      }
    }
  }
  .dialog-detail {
    display: flex;
    justify-content: center;
    .hidden-title{
      visibility: hidden;
    }
  }
  .reminder {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /deep/ .dialog-login {
    .el-dialog__body {
      display: flex;
      justify-content: center;
    }
  }
  /deep/.botton {
    .el-button--danger {
      background: #ff3b30;
      color: #ffffff;
    }
  }
  /deep/ .purchase {
    .el-input {
      width: 126px;
    }
  }
  /deep/ .dialog {
    .el-dialog__footer {
      display: flex;
      justify-content: center;
      .el-button--primary {
        width: 110px;
        height: 37px;
        background: #ff3b30;
        color: #ffffff;
        border: none;
      }
      .el-button--default {
        width: 110px;
        height: 37px;
        border: 1px solid #e5e5e5;
        background: #e5e5e5;
        color: #6b6b6b;
      }
    }
  }
  /deep/ .counter {
    .el-input-number {
      width: 132px;
      line-height: 26px;
      .el-input__inner {
        height: 28px;
      }
    }
  }
}
</style>
